
const tbody = document.querySelector('tbody');
// 封装查询数据
function grtScore() {
    axios.get('/score/list').then(r => {
        console.log(r.data.data);
        if (r.data.code === 0) {
            let html = ''
            const obj = r.data.data
            
          
            for (const key in obj) {
                const tempHTML = obj[key].score.reduce(
                    (h,v,i)=>
                    h +
                `<td class="score">${v} <input type="text" data-batch="${i + 1}" data-id="${key}" / > </td>`
                ,'')
                html += `<tr>
                <th scope="row">${key}</th>
                <td>${obj[key].name}</td>
                ${tempHTML}
               </tr>`
            }
            tbody.innerHTML = html

            // 获得tbody里面的所有input标签
            const inputs = tbody.querySelectorAll('input')

            inputs.forEach((input)=>
            // 给input绑定失去焦点事件
            input.addEventListener("blur",function(){
                // 获取修改所需要的值
                const data ={
                    stu_id: input.dataset.id,
                     batch: input.dataset.batch, 
                     score: input.value
                }
                // 发出修改请求
                axios.post('/score/entry',data)
                .then(r=>{
                    if (r.data.code === 0){
                        toastr.info(r.data.message)
                        // 获取最新数据渲染
                        grtScore()
                    }
                })
            })
            )

        }
    })
}

grtScore()

tbody.addEventListener("dblclick",function(e){

    const dom = e.target
    //给分数单元格绑定双击事件
    if (dom.nodeName === 'TD' && dom.classList.contains('score')){
   
        const input = dom.querySelector('input')
        // 将input显示出来
        input.style.display = 'block';
        // 将input输入修改的值 等于 当前单元格的文本
        input.value = dom.innerText;
        //获得焦点
        input.focus();

    }
})